<!-- 
  @description: 通用输入框
-->
<template>
  <input
    type="text"
    v-model="inputValue"
    @keyup.enter="submit"
    :style="customStyle"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
let inputValue = ref('')

defineProps({
  // 自定义样式
  customStyle: {
    type: Object,
    default: {}
  }
})

const emit = defineEmits<{
  (e: 'submit', value: string): void
}>()

const submit = () => {
  emit('submit', inputValue.value)
}

const clearInput = () => {
  inputValue.value = ''
}

defineExpose({
  clearInput
})
</script>

<style scoped lang="less">
@fontColor: rgb(122, 159, 235);

input {
  box-sizing: border-box;
  height: 40px;
  border: 1px solid #e4e7ed;
  border-radius: 40px;
  padding: 0 15px;
  font-size: 16px;
  transition: 0.2s;
  color: @fontColor;
  .dv-shadow();

  &:hover,
  &:focus {
    outline: none;
    background-color: #f0f5ff;
  }
}
</style>
